import React, { Component } from 'react'
import  Swiper from 'swiper';
import 'swiper/css/swiper.css'

import styled from 'styled-components'

const SwiperSlide = styled.div`
  width: 100%;
  img {
    transform:translate3d(0,0,0)
  }

`

export default class SwiperCom extends Component {

  render() {
    return (
      <div className="swiper-container">
        <div className="swiper-wrapper">
          {
            this.props.list.map((item, index) => {
              return <SwiperSlide key={index} className="swiper-slide">
                <img src={item.img} alt='' />
              </SwiperSlide>    
            })
          }
        </div>
      </div>
    )
  }



  componentDidUpdate() {
    new Swiper('.swiper-container', {})
  }

}
